<template>
  <div class="user">
    <el-form ref="form" :model="form" label-width="80px">
      <div class="top">
        <div v-show="imgstate" @click="clickone">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>

        <img :src="img" alt />
        <div>
          <el-form-item label="*输入ID:">
            <el-input class="width" v-model="form.name1"></el-input>
          </el-form-item>
          <el-form-item label="*真实姓名:">
            <el-input class="width" v-model="form.name3"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom1">
          <el-form-item label="选择专业:">
            <el-select
              class="wid"
              v-model="form.region1"
              @change="getCheckedNodes"
              placeholder="--请选择学院"
            >
              <!-- <el-option label="信息科学与工程学院" value="shanghai"></el-option> -->
              <el-option
                v-for="(item,index) in selectitem"
                :label="item.xueyuan"
                :value="item.xueyuan"
                :key="index"
              >{{item.xueyuan}}</el-option>
            </el-select>
            <el-select class="wid" v-model="form.region2" placeholder="--请选择专业">
              <el-option
                v-for="(item,index) in zhuan"
                :label="item.zhuanye"
                :value="item.zhuanye"
                :key="index"
              ></el-option>
              <!-- <el-option label="电子" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="*性别选择:">
            <el-radio-group v-model="form.resource1">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="wid1" label="年级:">
            <el-select
              class="style"
              @change="valitem"
              v-model="form.region6"
              placeholder="--请选择年级--"
            >
              <el-option
                v-for="(item,index) in grade"
                :label="item.grade"
                :value="item.grade"
                :key="index"
              ></el-option>
            </el-select>
            <el-select class="style" v-model="form.region5" placeholder="--请选择班级--">
              <el-option
                v-for="(item,index) in moni"
                :label="item.moni"
                :value="item.moni"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="wid1" label="职务:">
            <el-select v-model="form.region4" placeholder="--请选择职务--">
              <el-option
                v-for="(item,index) in zhiwu"
                :label="item.zhiwu"
                :value="item.zhiwu"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-input
            type="textarea"
            :rows="8"
            class="bottom-width"
            placeholder="惩奖简介"
            v-model="form.textarea"
          ></el-input>
          <el-button class="btn" type="primary" round>确认添加</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgstate: false,
      form: {
        name1: "",
        name2: "",
        name3: "",
        region1: "",
        region2: "",
        region3: "",
        region4: "",
        region5: "",
        region6: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        textarea: "",
        resource1: "男",
        resource2: "",
      },
      selectitem: [
        {
          xueyuan: "信息科学与工程学院",
          item: [
            {
              zhuanye: "通信工程",
            },
            {
              zhuanye: "电子技术",
            },
          ],
        },
        {
          xueyuan: "计算机科学与技术学院",
          item: [
            {
              zhuanye: "计算机技术",
            },
            {
              zhuanye: "生命科学与技术",
            },
          ],
        },
        {
          xueyuan: "城市建筑及环境类",
          item: [
            {
              zhuanye: "排水科学及工程",
            },
            {
              zhuanye: "建筑环境与设备工程",
            },
          ],
        },
        {
          xueyuan: "建筑管理类",
          item: [
            {
              zhuanye: "工程管理",
            },
            {
              zhuanye: "工程造价",
            },
            {
              zhuanye: "房地产经营管理",
            },
          ],
        },
        {
          xueyuan: "土木工程类",
          item: [
            {
              zhuanye: "土木工程",
            },
            {
              zhuanye: "测绘工程",
            },
            {
              zhuanye: "勘测技术与工程",
            },
          ],
        },
      ],
      zhuan: "1",
      grade: [
        {
          grade: "2016级",
          moni: [
            { moni: "1班" },
            { moni: "2班" },
            { moni: "3班" },
            { moni: "4班" },
          ],
        },
        {
          grade: "2017级",
          moni: [
            { moni: "1班" },
            { moni: "2班" },
            { moni: "3班" },
            { moni: "4班" },
          ],
        },
        {
          grade: "2018级",
          moni: [
            { moni: "1班" },
            { moni: "2班" },
            { moni: "3班" },
            { moni: "4班" },
          ],
        },
        {
          grade: "2019级",
          moni: [
            { moni: "1班" },
            { moni: "2班" },
            { moni: "3班" },
            { moni: "4班" },
          ],
        },
        {
          grade: "2020级",
          moni: [
            { moni: "1班" },
            { moni: "2班" },
            { moni: "3班" },
            { moni: "4班" },
          ],
        },
      ],
      zhiwu: [
        {
          zhiwu: "班长",
        },
        {
          zhiwu: "学习委员",
        },
        {
          zhiwu: "体育委员",
        },
        {
          zhiwu: "纪律委员",
        },
      ],
      moni: "",
      img: require("./assets/logo.png"),
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    clickone() {
      this.imgstate = false;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    onSubmit() {
      console.log("submit!");
    },
    valitem(e) {
      // this.form.region2 = e;
      // console.log(e);
      let that = this;
      for (let i = 0; i < that.grade.length; i++) {
        if (that.grade[i].grade == e) {
          that.moni = that.grade[i].moni;
          that.form.region5 = that.grade[i].moni[0].moni;
        }
      }
    },
    getCheckedNodes(e) {
      let arr = [];
      let that = this;
      for (let i = 0; i < this.selectitem.length; i++) {
        if (that.selectitem[i].xueyuan == e) {
          // console.log(e);
          // console.log(that.zhuan);
          // console.log(that.selectitem[i]);
          that.zhuan = that.selectitem[i].item;
          this.form.region2 = that.selectitem[i].item[0];
          console.log(that.zhuan);
        }
      }
      // clearCheckedNodes()
    },
  },
};
</script>
<style scoped lang="less">
.style {
  width: 120px;
  margin-right: 20px;
}
.wid1 {
  // width: 400px;
}
.wid {
  width: 120px;
}
.wid:nth-of-type(1) {
  margin-right: 20px;
}
.btn {
  display: block;
  margin: 0px auto;
  margin-top: 5%;
}
.bottom-width {
  width: 400px;
}
.bottom {
  display: flex;
  justify-content: space-between;
}
.width {
  width: 400px;
}
.user {
  width: 800px;
  margin: 5% auto;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
  margin-top: 5%;
  & img {
    width: 200px;
    height: 200px;
    border: 1px solid silver;
    border-radius: 50%;
    margin-right: 10%;
  }
}
</style>